菜菜菜的前端學習日誌 - Day25

相信大家都了解 jQuery 最重要的就是操作 DOM 元素

如何從 DOM 取值與設值也很重要

今天就來介紹一下如何來取值與設值

以及新增及刪除 DOM

text

取值

首先先講如何取到元素裡的內容

<button class="click">可利可蜜</button>
<p class="test1">Hello!! My name is Andy.</p>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        alert($(".test1").text());
      })
    });
</script>

透過點擊我們就能去取得Ｐ段落裡面的文字內容

設值

接下來就是設定值，我們可以直接改變Ｐ裡面的內容了

<button class="click">可利可蜜</button>
<p class="test1">Hello!! My name is Andy.</p>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $(".test1").text("I'm so cold");
      })
    });
</script>

這樣子我們就改變了Ｐ裡面的內容了

val

取值

val 是用在input 上，我們一樣先來練習取值

<button class="click">可利可蜜</button>
<input type="text" id="try" value="hey!!">

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        alert($("#try").val());
      })
    });
</script>

這樣就能取到input裡面的值了

設值

話不多說就來練習設定值給input吧

<button class="click">可利可蜜</button>
<input type="text" id="try" value="hey!!">

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $("#try").val('YO!!');
      })
    });
</script>

這樣子input裡面的值就改變了

append

再來就講一下如何新增元素

<button class="click">可利可蜜</button>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $("body").append("<p>Hello My name is Andy!!</p>");
      });
    });
</script>

這樣子我們就能透過點擊按鈕來新增一個新的Ｐ段落

remove

能夠新增元素當然也能夠刪除元素囉

就讓我們來練習一下吧

<button class="click">可利可蜜</button>

<script>
    $(document).ready(function(){
      $(".click").click(function(){
        $("body").append("<p>Hello My name is Andy!!</p>");
      });
    });
</script>

這樣子就將Ｐ段落刪除了

效果看起來跟昨天介紹的hide很像

但是不一樣的是 hide 只是將元素隱藏起來

remove 是直接將元素刪除